<template>
	<div class="app-container">
		<el-form
			:model="queryParams"
			ref="queryForm"
			:inline="true"
			v-show="showSearch"
			label-width="68px"
		>
			<el-form-item
				label="格式"
				prop="format"
			>
				<el-select
					v-model="queryParams.format"
					placeholder="请选择格式"
					clearable
					size="small"
				>
					<el-option
						v-for="dict in formatOptions"
						:key="dict.dictValue"
						:label="dict.dictLabel"
						:value="dict.dictValue"
					/>
				</el-select>
			</el-form-item>
			<el-form-item
				label="类型"
				prop="infoType"
			>
				<el-select
					v-model="queryParams.infoType"
					placeholder="请选择类型"
				>
					<el-option
						v-for="dict in controlOptions"
						:key="dict.dictValue"
						:label="dict.dictLabel"
						:value="parseInt(dict.dictValue)"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
				>搜索</el-button>
				<el-button
					icon="el-icon-refresh"
					size="mini"
					@click="resetQuery"
				>重置</el-button>
			</el-form-item>
		</el-form>

		<el-row
			:gutter="10"
			class="mb8"
		>
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['led:ledTemplateManage:add']"
				>新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="success"
					plain
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleUpdate"
					v-hasPermi="['led:ledTemplateManage:edit']"
				>修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['led:ledTemplateManage:remove']"
				>删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['led:ledTemplateManage:export']"
				>导出</el-button>
			</el-col>
			<right-toolbar
				:showSearch.sync="showSearch"
				@queryTable="getList"
			></right-toolbar>
		</el-row>

		<el-table
			v-loading="loading"
			:data="ledTemplateManageList"
			@selection-change="handleSelectionChange"
		>
			<el-table-column
				type="selection"
				width="55"
				align="center"
			/>
			<el-table-column
				label="主键"
				align="center"
				prop="id"
			/>
			<el-table-column
				label="主题"
				align="center"
				prop="theme"
			/>
			<el-table-column
				label="展示内容"
				align="center"
				prop="showContent"
			/>
			<el-table-column
				label="格式"
				align="center"
				prop="format"
				:formatter="formatFormat"
			/>
			<el-table-column
				label="类型"
				align="center"
				prop="infoType"
				:formatter="infoTypeFormat"
			/>
			<el-table-column
				label="停留时间"
				align="center"
				prop="stopTime"
			>
				<template slot-scope="scope">
					{{scope.row.stopTime==0?"静":scope.row.stopTime}}
				</template>
			</el-table-column>
			<el-table-column
				label="添加时间"
				align="center"
				prop="addTime"
				width="180"
			>
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.addTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="创建人"
				align="center"
				prop="createUser"
			/>
			<el-table-column
				label="操作"
				align="center"
				class-name="small-padding fixed-width"
			>
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-s-promotion"
						@click="handleRelease(scope.row)"
						v-hasPermi="['led:ledTemplateManage:publish']"
					>
						发布
					</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['led:ledTemplateManage:edit']"
					>修改</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['led:ledTemplateManage:remove']"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total>0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>

		<!-- 添加或修改大屏模板管理对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			width="500px"
			append-to-body
		>
			<el-form
				ref="form"
				:model="form"
				:rules="rules"
				label-width="100px"
			>
				<el-form-item
					label="主题"
					prop="theme"
				>
					<el-input
						v-model="form.theme"
						placeholder="请输入主题"
					/>
				</el-form-item>
				<el-form-item
					:label='index>0?"":"展示内容"'
					prop="showContent"
					v-for="(item,index) of formContent.contentItem"
					:key="index"
				>
					<div style="display:flex;justify-content: space-around">
						<el-input
							v-model="item.value"
							placeholder="请输入内容"
						/>
						<el-button
							type="primary"
							@click="addContent"
							v-if="index==0"
						>增加</el-button>
						<el-button
							type="warning"
							@click="deleteContent(item)"
							v-if="index>0"
						>删除</el-button>
					</div>
				</el-form-item>
				<el-form-item
					label="格式"
					prop="format"
				>
					<el-select
						v-model="form.format"
						placeholder="请选择格式"
					>
						<el-option
							v-for="dict in formatOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item>

				<!-- <el-form-item
					label="显示方式"
					prop="showStyle"
				>
					<el-select
						v-model="form.showStyle"
						placeholder="请选择显示方式"
					>
						<el-option
							v-for="dict in showStyleOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item
					v-if="form.format==1"
					label="停留时间"
					prop="stopTime"
				>
					<el-input
						type="number"
						v-model="form.stopTime"
						placeholder="请输入停留时间"
					/>
				</el-form-item>
				<el-form-item
					label="类型"
					prop="infoType"
				>
					<el-select
						v-model="form.infoType"
						placeholder="请选择类型"
					>
						<el-option
							v-for="dict in controlOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item>

			</el-form>
			<div
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					type="primary"
					@click="submitForm"
				>确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 发布 -->
		<el-dialog
			title="大屏名称"
			:visible.sync="releaseDialogVisible"
			width="30%"
		>
			<el-tree
				show-checkbox
				node-key="id"
				class="filter-tree ele_new_left_good"
				:default-expand-all='false'
				:data="allList"
				:props="defaultProps"
				@check-change="handleCheckChange"
				ref="tree"
			>
			</el-tree>
			<!-- <el-checkbox-group v-model="bigScreenids">
				<el-checkbox
					style="display:block;"
					v-for="item in bigScreen"
					:label="item.id"
					:key="item.id"
				>{{item.name}}</el-checkbox>
			</el-checkbox-group> -->
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button @click="releaseDialogVisible = false">取 消</el-button>
				<el-button
					type="primary"
					@click="releaseBtn()"
				>确 定</el-button>
			</span>
		</el-dialog>
		<!-- 发布成功 -->
		<el-dialog
			title="提示"
			:visible.sync="successDialogVisible"
			width="30%"
			center
		>
			<span
				v-for="item of successInfo"
				:key="item"
			>{{item}}<br></span>
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					type="primary"
					@click="successDialogVisible = false"
				>确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listLedTemplateManage,
		getLedTemplateManage,
		delLedTemplateManage,
		addLedTemplateManage,
		updateLedTemplateManage,
		publish,
		screenTree,
	} from "@/api/led/ledTemplateManage";
	// 查询大屏详情
	import { listLedInfoManage } from "@/api/led/ledInfoManage";
	export default {
		name: "LedTemplateManage",
		components: {},
		data() {
			return {
				// 发布成功提示框
				successDialogVisible: false,
				// 成功消息
				successInfo: "",
				// 大屏详情
				screenDetails: {},
				// 大屏名字集合
				allList: [],
				defaultProps: {
					children: "children",
					label: "name",
					disabled: this.disabledFn,
				},
				// 发布弹窗

				releaseDialogVisible: false,
				// 大屏数组
				bigScreen: [],
				bigScreenids: [],
				releaseId: "",
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 大屏模板管理表格数据
				ledTemplateManageList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 格式字典
				formatOptions: [],
				// 类型字典
				controlOptions: [],
				// 显示方式字典
				// showStyleOptions: [],

				// 字体颜色字典
				fontColorOptions: [],
				// 字体字典
				fontBodyOptions: [],

				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					format: null,
					infoType: null,
				},
				// 表单参数
				form: {},
				formContent: {
					contentItem: [
						{
							value: "",
						},
					],
				},
				// 表单校验
				rules: {
					theme: [
						{
							required: true,
							message: "主题不能为空",
							trigger: "blur",
						},
					],
					showContent: [
						{
							required: true,
							message: "展示内容不能为空",
							trigger: "blur",
						},
					],
					format: [
						{
							required: true,
							message: "格式不能为空",
							trigger: "change",
						},
					],
					infoType: [
						{
							required: true,
							message: "类型不能为空",
							trigger: "change",
						},
					],
					// showStyle: [
					// 	{
					// 		required: true,
					// 		message: "显示方式不能为空",
					// 		trigger: "change",
					// 	},
					// ],
					stopTime: [
						{
							required: true,
							message: "停留时间不能为空",
							trigger: "blur",
						},
					],

					createUser: [
						{
							required: true,
							message: "创建人不能为空",
							trigger: "blur",
						},
					],
				},
			};
		},

		created() {
			this.getList();
			this.getDicts("led_format_type").then((response) => {
				this.formatOptions = response.data;
			});
			this.getDicts("led_control_type").then((response) => {
				this.controlOptions = response.data;
			});
			// this.getDicts("led_show_style").then((response) => {
			// 	this.showStyleOptions = response.data;
			// });

			this.getDicts("font_color").then((response) => {
				this.fontColorOptions = response.data;
			});
			this.getDicts("led_font_body").then((response) => {
				this.fontBodyOptions = response.data;
			});
		},
    watch:{
       'form.format':function(e){
				 if(e==0){
					 this.form.stopTime=0
				 }
			 }
		},
		methods: {
			addContent() {
				this.formContent.contentItem.push({
					value: "",
					// key: Date.now()
				});
			},
			deleteContent(item) {
				console.log(item);
				var index = this.formContent.contentItem.indexOf(item);
				console.log(index);
				if (index !== -1) {
					this.formContent.contentItem.splice(index, 1);
				}
			},
			/** 查询大屏模板管理列表 */
			getList() {
				this.loading = true;
				listLedTemplateManage(this.queryParams).then((response) => {
					this.ledTemplateManageList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 类型字典翻译
			formatFormat(row, column) {
				return this.selectDictLabel(this.formatOptions, row.format);
			},
			// 类型字典翻译
			infoTypeFormat(row, colum) {
				return this.selectDictLabel(this.controlOptions, row.infoType);
			},
			// 显示方式字典翻译
			// showStyleFormat(row, column) {
			// 	return this.selectDictLabel(this.showStyleOptions, row.showStyle);
			// },

			// 字体颜色字典翻译
			fontColorFormat(row, column) {
				return this.selectDictLabel(this.fontColorOptions, row.fontColor);
			},
			// 字体字典翻译
			fontBodyFormat(row, column) {
				return this.selectDictLabel(this.fontBodyOptions, row.fontBody);
			},

			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				(this.formContent = {
					contentItem: [
						{
							value: "",
						},
					],
				}),
					(this.form = {
						id: null,
						theme: null,

						showContent: [
							{
								value: "",
							},
						],
						format: null,
						// showStyle: null,
						stopTime: null,

						fontColor: null,
						fontBody: null,

						addTime: null,
						createUser: null,
					});
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加大屏模板管理";
			},
			// 回调大屏ids数组
			handleCheckChange(data, checked, indeterminate) {
				// console.log(data, checked, indeterminate);
				// console.log(this.$refs.tree.getCheckedKeys(false));
				let newArr = [];
				this.$refs.tree.getCheckedKeys(false).forEach((item) => {
					if (item) {
						newArr.push(item);
					}
				});
				this.bigScreenids = newArr;

				console.log(this.bigScreenids);
			},
			// 发布
			handleRelease(row) {
				console.log(row);
				this.screenDetails = row;
				console.log(row);
				this.releaseDialogVisible = true;
				// 重置为空
				this.bigScreenids = [];

				// this.releaseId = row.id;
				screenTree({}).then((res) => {
					if (res.code == 200) {
						for (let i = 0; i < res.data.length; i++) {
							// res.data[i].disabled = true;
							delete res.data[i].id;
							res.data[i].position = res.data[i].name;
						}

						this.allList = res.data;
						this.defaultProps.label = "position";
					} else {
						// console.log(res);
						this.$message({
							message: "查询失败请稍后再试,或与管理员联系",
							type: "error",
						});
					}
				});

				// listLedInfoManage().then((res) => {
				// 	// console.log(res);
				// 	this.bigScreen = res.rows;
				// });
				// .error(err=>{
				// 	console.log(err);
				// })
			},
			// 确认发布
			releaseBtn() {
				publish({
					ids: this.bigScreenids,
					// ledTemplateId: this.releaseId,
					format: this.screenDetails.format,
					showContent: this.screenDetails.showContent,
					stopTime: this.screenDetails.stopTime,
					theme: this.screenDetails.theme,
					infoType: this.screenDetails.infoType,
				}).then((res) => {
					if (res.code == 200) {
						this.successDialogVisible = true;
						this.successInfo = res.msg.split("|");
						this.releaseDialogVisible = false;
						this.$message({
							type: "success",
							message: "发布成功",
						});
					} else {
						this.$message({
							type: "error",
							message: "发布失败",
						});
					}
				});
				// .catch(function (err) {
				// 	console.log(err);
				// 	console.log(err.split("<br>") + "<br />");
				// 		this.$message({
				// 			type: "error",
				// 			message: err,
				// 		});
				// 	console.log(err);
				// });
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids;
				getLedTemplateManage(id).then((response) => {
					// console.log(response);
					//response.showContent
					this.formContent.contentItem = [];
					response.data.showContent.split("||").forEach((item) => {
						let content = {};
						content.value = item;
						this.formContent.contentItem.push(content);
					});
					console.log(response.data.showContent);

					this.form = response.data;
					this.open = true;
					this.title = "修改大屏模板管理";
				});
			},
			/** 提交按钮 */
			submitForm() {
				let arrShowContent = [];
				this.formContent.contentItem.forEach((item) => {
					arrShowContent.push(item.value);
				});
				this.form.showContent = arrShowContent.join("||");
				// this.form.showContent=this.form.showContent.join("||");
				this.$refs["form"].validate((valid) => {
					console.log(valid);

					if (valid) {
						if (this.form.id != null) {
							// if (this.form.format != 1) {
							// 	this.form.stopTime == null;
							// }
							updateLedTemplateManage(this.form).then((response) => {
								this.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addLedTemplateManage(this.form).then((response) => {
								this.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},

			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$confirm(
					'是否确认删除大屏模板管理编号为"' + ids + '"的数据项?',
					"警告",
					{
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					}
				)
					.then(function () {
						return delLedTemplateManage(ids);
					})
					.then(() => {
						this.getList();
						this.msgSuccess("删除成功");
					});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download(
					"led/ledTemplateManage/export",
					{
						...this.queryParams,
					},
					`led_ledTemplateManage.xlsx`
				);
			},
		},
	};
</script>
<style scoped>
	deep.el-radio {
		display: block;
		line-height: 23px;
		white-space: normal;
		margin-right: 0;
	}
</style>